<template>
  <div class="wrapper">
    <div class="search">
      <div
        class="search__back iconfont"
        @click="handleBackClick"
      >&#xe6f2;</div>
      <div class="search__content">
        <i class="search__content__icon iconfont">&#xe62d;</i>
        <input class="search__content__input" placeholder="请输入商品名称"/>
      </div>
    </div>

  <!--  这里使用v-if主要是为了防止图片加载过慢...emmmm...其实最好还是最开始设置一个默认的  -->
  <!--<ShopInfo :item="item" v-if="item.imgUrl"/>-->
    <ShopInfo :item="item"/>

    <Content :shopName="item.name"/>

    <Cart/>
  </div>
</template>

<script>
import {reactive, toRefs} from "vue";
import {useRouter,useRoute} from 'vue-router';

import ShopInfo from "@/components/ShopInfo";
import {get} from "@/utils/request";
import Content from "@/views/shop/Content";
import Cart from "@/views/shop/Cart";

//获取当前商铺信息
const useShopInfoEffect = () => {
  const route = useRoute();
  const data = reactive({item:{}});

  const getItemData = async ()=>{
    const result = await get(`/api/shop/${route.params.id}`); //是在router/index.js里定义路由时 `path: '/shop/:id'` 这里定义的, 如果这里不叫id, 而叫idxx, 那么 这里就要通过 route.params.idxx 取值
    console.log('result:',result);

    //console.log('getItemData result:',result);
    if (result?.errno === 0 && result?.data) {
      data.item = result.data;
    }
  }

  const {item} = toRefs(data);

  return {
    item,
    getItemData
  }
};

//点击回退逻辑
const useBackRouterEffect = ()=>{
  const router = useRouter();

  const handleBackClick = () => {
    router.back();
  };

  return handleBackClick
}

export default {
  name: "Shop",
  components: {ShopInfo,Content,Cart},
  setup(){
    const handleBackClick = useBackRouterEffect();
    const {item,getItemData} = useShopInfoEffect();
    getItemData();

    return {
      item,
      handleBackClick
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables";

.wrapper {
  padding: 0 .18rem;
}

.search {
  margin: .14rem 0 .04rem 0;

  display: flex;
  line-height: .32rem;

  &__back{
    font-size: .24rem;
    color: #B6B6B6;
    width: .3rem;
  }

  &__content {
    flex: 1;
    background: $search-bgColor;
    border-radius: .16rem;
    display: flex;

    &__icon {
      width: .44rem;
      text-align: center;
      color: $search-fontColor;
    }
    &__input{
      border: none;
      outline: none;
      background: none;

      color: $content-fontColor;

      height: .32rem;
      padding:0 .2rem 0 0;
      flex: 1;

      &::placeholder {
        color: $content-fontColor;
      }
    }
  }
}
</style>
